<template>
  <div>
    <p>{{$route.query.batchNum.substring(0,$route.query.batchNum.indexOf(' '))}} 对账订单</p>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="订单号：">
        <el-input v-model.trim="formInline.orderNum" placeholder="请输入订单号"></el-input>
      </el-form-item>
      <el-form-item label="交易流水号：">
        <el-input v-model.trim="formInline.opposingTransaction" placeholder="请输入交易流水号"></el-input>
      </el-form-item>
      <el-form-item label="购房者：">
        <el-input v-model.trim="customerName" placeholder="请输入手机号/姓名"></el-input>
      </el-form-item>
      <el-form-item label="支付状态：">
        <el-select filterable v-model="formInline.paymentStatus" placeholder="请选择">
          <el-option
            v-for="item in paymentStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式：">
        <el-select filterable v-model="formInline.paymentMethod" placeholder="请选择">
          <el-option
            v-for="item in paymentMethod"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="onClear">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="recordList" border style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
      <el-table-column align="center" label="好生活平台数据">
        <el-table-column align="center" prop="divName" label="楼盘名称"></el-table-column>
        <el-table-column align="center" prop="orderNum" label="订单号"></el-table-column>
        <el-table-column align="center" prop="easylifeCopeNum" :formatter="easylifeCopeNum" label="应付款金额"></el-table-column>
        <el-table-column align="center" prop="customerName" label="客户"></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="支付平台数据">
        <el-table-column align="center" prop="opposingTransaction" label="交易流水号"></el-table-column>
        <el-table-column
          align="center"
          prop="transactionTime"
          :formatter="transactionTime"
          label="交易时间"
        ></el-table-column>
        <el-table-column align="center" prop="opposingPaidNum" :formatter="opposingPaidNum" label="实付款金额"></el-table-column>
        <el-table-column
          align="center"
          prop="customerName"
          label="支付方式"
          :formatter="paymentMethods"
        ></el-table-column>
        <el-table-column align="center" prop="customerName" label="支付状态" :formatter="payments"></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="差异操作">
        <el-table-column align="center" prop="difference" :formatter="differences" label="是否差异"></el-table-column>
        <el-table-column fixed="right"  width="150" align="center" label="差异原因">
          <template slot-scope="scope">
            <el-button class="seeText" type="text" @click="edits(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="details(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      style="margin-top:15px;"
      layout="total, sizes, prev, pager, next"
      :current-page="formInline.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="formInline.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    ></el-pagination>

    <el-dialog title="差异原因记录" :visible.sync="dialogTableVisible">
      <el-table :data="differenceRecord">
        <el-table-column property="reconciliationTime" label="对账时间"></el-table-column>
        <el-table-column property="difference" label="是否差异"></el-table-column>
        <el-table-column property="differenceReason" label="差异原因"></el-table-column>
        <el-table-column property="createName" label="差异原因添加人"></el-table-column>
        <el-table-column property="createTime" label="差异原因添加时间"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="编辑原因" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="差异原因：">
          <el-select filterable v-model="form.differenceReason" placeholder="请选择">
            <el-option :value="0" label="金额不一致"></el-option>
            <el-option :value="1" label="支付状态不一致"></el-option>
            <el-option :value="2" label="好生活平台无此订单"></el-option>
            <el-option :value="3" label="支付平台无此订单"></el-option>
            <el-option :value="4" label="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="差异备注：" style="position: relative;">
          <el-input
            :autosize="{ minRows: 4, maxRows: 8}"
            type="textarea"
            maxlength="150"
            v-model="form.differenceRemarks"
          >
          </el-input>
          <span class="title_num">{{form.differenceRemarks.length}}/{{150 - form.differenceRemarks.length}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editingReasonCancel">取 消</el-button>
        <el-button type="primary" @click="editingReasonSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import utils from "@/common/utils";
import api from "@/api/apiPath";
export default {
  name: "reconciliationOrder",
  data() {
    return {
      paymentStatus: [
        { value: "", label: "全部" },
        { value: 1, label: "支付成功" },
        { value: 2, label: "支付失败" },
        { value: 3, label: "退款成功" },
        { value: 4, label: "退款中" },
        { value: 5, label: "退款失败" }
      ],
      paymentMethod: [
        { value: 0, label: "微信支付" },
        { value: 1, label: "支付宝支付" },
        { value: 2, label: "合支付" },
        { value: 3, label: "线上通联支付" },
        { value: 4, label: "pos刷卡支付" },
        { value: 5, label: "pos扫码支付" }
      ],
      recordList: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      customerName: '',
      formInline: {
        orderNum: "",
        difference: this.$route.query.difference,
        opposingTransaction: "",
        customerPhone: "",
        paymentStatus: "",
        beginTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 10
      },
      form: {
        differenceReason: 0,
        differenceRemarks: ""
      },
      total: 0,
      differenceTotal: 0,
      differenceRecord: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  created() {
    this.list();
  },
  methods: {
    list() {
      this.$axios
        .post("/raise/dealingOpposingOrder/toViewDetailList", this.formInline)
        .then(res => {
          this.recordList = res.list;
          this.total = res.total;
        });
    },
    handleSizeChange(size) {
      this.formInline.pageSize = size;
      this.list();
    },
    handleCurrentChange(page) {
      this.formInline.pageNum = page;
      this.list();
    },
    paymentMethods(row) {
      if (row.paymentMethod == 0) {
        return "微信支付";
      } else if (row.paymentMethod == 1) {
        return "支付宝支付";
      } else if (row.paymentMethod == 2) {
        return "合支付";
      } else if (row.paymentMethod == 3) {
        return "线上通联支付";
      } else if (row.paymentMethod == 4) {
        return "post刷卡支付";
      } else {
        return "pos扫码支付";
      }
    },

    payments(row) {
      if (row.paymentStatus == 1) {
        return "支付成功";
      } else if (row.paymentMethod == 2) {
        return "支付失败";
      } else if (row.paymentMethod == 3) {
        return "退款成功";
      }
      if (row.paymentMethod == 4) {
        return "退款中";
      } else {
        return "退款失败";
      }
    },
    easylifeCopeNum(row) {
      if(typeof row.easylifeCopeNum == 'number') {
        return row.easylifeCopeNum.toFixed(2);
      } else {
        return '';
      }
    },
    opposingPaidNum(row) {
      if(typeof row.opposingPaidNum == 'number') {
        return row.opposingPaidNum.toFixed(2)
      }else {
        return ''
      }
    },
    differences(row) {
      if (row.difference == 0) {
        return "否";
      } else {
        return "是";
      }
    },
    transactionTime(row) {
      return utils.getTimeString(row.transactionTime);
    },
    onSubmit() {
      this.formInline.pageNum = 1;
      if(typeof this.customerName == 'number' && this.customerName.length > 10) {
        this.formInline.customerPhone = this.customerName;
      }else {
        this.formInline.customerName = this.customerName;
      }
      this.list();
    },
    onClear() {
      this.customerName = '';
      this.formInline = {
        orderNum: "",
        difference: this.$route.query.difference,
        opposingTransaction: "",
        customerPhone: "",
        customerName: "",
        paymentStatus: "",
        beginTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 10
      };
      this.list();
    },
    differenceRecordList(id) {
      this.$axios
        .get("/raise/dealingOpposingOrder/selectDifferenceList/" + id)
        .then(res => {
          for (let item of res) {
            item.reconciliationTime = utils.getTimeString(
              item.reconciliationTime
            );
            item.createTime = utils.getTimeString(item.createTime);
            if (item.difference == 0) {
              item.difference = "否";
            } else {
              item.difference = "是";
            }
          }
          this.differenceRecord = res;
        });
    },
    details(id) {
      this.differenceRecordList(id);
      this.dialogTableVisible = true;
    },
    edits() {
      this.dialogFormVisible = true;
    },
    editingReasonCancel() {
      this.dialogFormVisible = false;
      this.form = {
        differenceReason: 0,
        differenceRemarks: ""
      };
    },
    editingReasonSubmit() {
      this.$axios
        .post("/raise/dealingOpposingOrder/insertDifference", this.form)
        .then(res => {
          this.dialogFormVisible = false;
          this.$message({
            type: "success",
            message: "操作成功"
          });
        });
    }
  }
};
</script>

<style scoped>
.seeText::after {
  content: "|";
  margin-left: 5px;
  color: #409eff !important;
}
.title_num {
  position: absolute;
  right: 15px;
  bottom: -6px;
}
</style>